/*Common 通用样式*/
html {color: #666;}
.fa-align-center {text-align: center;}
.fa-align-left {text-align: left;}
.fa-align-right {text-align: right;}
.fa-display-block {display: block;}
.fa-display-none {display: none;}


/*fa业务样式*/
.fa-layout {z-index: 0;}
/*默认样式*/
.fa-side {position: fixed;top: 0px;bottom: 0px;left: 0px;z-index: 9;width: 200px;transition: width 0.5s;background-color: #393D49;}
.fa-side .fa-logo {height: 50px;line-height: 50px;text-align: center;font-size: 36px;overflow: hidden; color: white;}
.fa-side .fa-logo:before {content: "FishAdmin";font-size: 28px; transition: all .5s;}
.fa-main .fa-header .layui-icon-shrink-right {display: block;}
.fa-main .fa-header .layui-icon-spread-left {display: none;}
/*关闭side样式*/
.fa-side-off .fa-side {width: 50px;}
.fa-side-off .fa-main {left: 50px;}
.fa-side-off .fa-main .fa-header .layui-icon-shrink-right {display: none;}
.fa-side-off .fa-main .fa-header .layui-icon-spread-left {display: block;}
.fa-side-off .fa-side .fa-logo:before {content: "FA";}
.fa-side-off .fa-side .fa-nav .fa-nav-dir:after,
.fa-side-off .fa-side .fa-nav .fa-nav-dir > span,
.fa-side-off .fa-side .fa-nav .fa-nav-item > span,
.fa-side-off .fa-side .fa-nav .fa-nav-dir.fa-nav-itemed + .fa-nav {display: none;}

/*导航*/
.fa-nav-box {color: #ffffff;height: 100%;width: 100%;box-shadow: 0px 0px 2px 0 rgba(35, 150, 75, .8);display: block;}
.fa-nav-box .fa-nav {display: none;}
/*item 默认样式*/
.fa-nav .fa-nav-dir,
.fa-nav .fa-nav-item {display: block;line-height: 40px;font-size: 14px;text-decoration: none;color: rgba(255, 255, 255, .7);cursor: pointer;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align: left;}
.fa-nav .fa-nav-dir:before,
.fa-nav .fa-nav-item:before {;content: "";visibility: hidden;float: left;width: 2px;height: 40px;background-color: #ffffff;transition: height .5s;position: absolute;left: 0px;}
.fa-nav .fa-nav-dir:after {position: relative;float: right;content: "\e625";font-family: layui-icon !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;transform: rotate(90deg);transition: all 0.1s;}
/*item悬停、选中后的样式*/
.fa-nav .fa-nav-dir.fa-nav-itemed {color: white}
.fa-nav .fa-nav-dir.fa-nav-itemed:after {transform: rotate(0deg);}
.fa-nav .fa-nav-dir:hover,
.fa-nav .fa-nav-item.fa-nav-itemed,
.fa-nav .fa-nav-item:hover {background-color: #0f964c;color: white;}
.fa-nav .fa-nav-dir:hover:before,
.fa-nav .fa-nav-item.fa-nav-itemed:before,
.fa-nav .fa-nav-item:hover:before {visibility: visible;height: 40px;}
.fa-nav .fa-nav-dir.fa-nav-itemed + .fa-nav {display: block;}
/*更多展开样式*/

/*item 1、2、3、4级导航缩进*/
.fa-nav .fa-nav-dir,
.fa-nav .fa-nav-item {padding-left: 10px;}
.fa-nav .fa-nav .fa-nav-dir,
.fa-nav .fa-nav .fa-nav-item {padding-left: 20px;}
.fa-nav .fa-nav .fa-nav .fa-nav-dir,
.fa-nav .fa-nav .fa-nav .fa-nav-item {padding-left: 30px;}
.fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-dir,
.fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-item {padding-left: 40px;}

/*主体*/
.fa-main {position: absolute;top: 0px;right: 0px;bottom: 0px;left: 200px;transition: left 0.5s}
/*头部*/
.fa-header {height: 50px;line-height: 50px;width: 100%;z-index: 10;background-color: #393D49}
.fa-header .fa-side-switch {position: absolute;top: 0px;width: 40px;height: 50px;vertical-align: center;color: white;text-align: center;cursor: pointer;color: white;}
.fa-header .fa-nav-left {border-radius: 0px;position: relative;left: 40px;}
.fa-header .fa-nav-right {right: 0px;float: right;top: 0px;position: absolute;}
.fa-header .layui-nav-item {line-height: 50px;}

/*页签*/
.fa-tab {position: absolute;top: 50px;left: 0px;right: 0px;height: 40px;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);background-color: #fff;z-index: 2;padding: 0px 80px 0px 40px;}
.fa-tab .fa-tab-prev,
.fa-tab .fa-tab-next,
.fa-tab .fa-tab-ctr-more,
.fa-tab .fa-tab-ctr {position: absolute;height: 40px;width: 40px;line-height: 40px;text-align: center;cursor: pointer;}
.fa-tab .fa-tab-prev {left: 0px;position: absolute;float: left;border-right: 1px solid #f6f6f6;}
.fa-tab .fa-tab-next {right: 40px;top: 0px;border-left: 1px solid #f6f6f6;}
.fa-tab .fa-tab-ctr {right: 0px;top: 0px;border-left: 1px solid #f6f6f6;}
.fa-tab .fa-tab-ctr-more {display: none;overflow: hidden;white-space: nowrap;right: 0px;top: 40px;width: 100px;border: 1px solid #d2d2d2;height: 0px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12);transition: height 0.5s;}
.fa-tab .fa-tab-ctr-more > li:hover {background-color: #f6f6f6;}
.fa-tab .fa-tab-ctr-more-on {height: 120px;display: block;}
.fa-tab .fa-tab-item {padding-left: .5em;position: relative;height: 40px;line-height: 40px;list-style: none;display: inline-block;min-width: 50px;border-right: 1px solid #f6f6f6;margin: 0px;transition: all 5ms;cursor: pointer;overflow: hidden;}
.fa-tab .fa-tab-item:before {position: absolute;top: 0px;left: 0px;border: none;content: "";visibility: hidden;width: 0%;height: 4px;background-color: #009688;transition: all .3s}
.fa-tab .fa-tab-pan {overflow: hidden;height: 40px;}
.fa-tab .fa-tab-pan ul {position: relative;white-space: nowrap;transition: left .5s;left: 0px;}
.fa-tab .fa-tab-prev:hover,
.fa-tab .fa-tab-next:hover,
.fa-tab .fa-tab-ctr:hover,
.fa-tab .fa-tab-item.fa-selected,
.fa-tab .fa-tab-item:hover {background-color: #f6f6f6}
.fa-tab .fa-tab-item.fa-selected:before,
.fa-tab .fa-tab-item:hover:before {visibility: visible;width: 100%;}
.fa-tab .fa-tab-item span {padding: 0px 0.5em;}
.fa-tab .fa-tab-item i {margin-right: 0.5em;}
.fa-tab .fa-tab-item i:hover {background-color: #ff4646;color: white;border-radius: 20px;}
.fa-tab .fa-tab-item.fa-tab-locked .layui-icon-close {display: none;}
.fa-content {position: absolute;top: 90px;left: 0px;right: 0px;bottom: 0px;margin-left: 0px;background-color: white;}
.fa-content-item {width: 100%;height: 100%;padding: 0px;display: none;}
.fa-content-item iframe {width: 100%;height: 100%;border: none;margin: 0px;padding: 0px;position: absolute;}
